<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src="../assets/vue.js"></script>
	<title>methods Option</title>
</head>
<body>
<h1>24_Vue_methods</h1>
<hr>
<div id="app">
	{{num}}
	<button @click="add">add</button>
</div>
<button onclick="reduce();">reduce</button>
<button onclick="off();">OffReduce</button>

<script type="text/javascript">
	var app= new Vue({
		el:'#app',
		data:{
			num:1,
		},
		methods:{
			add:function () {
				this.num ++ ;
			}
		}
	});

	// （名称，匿名函数）
	app.$on('reduce',function(){
		console.log('执行了reduce()');
		this.num--;
	});


	function reduce() {
		app.$emit('reduce');
	}

	//关闭事件
	function off(){
		app.$off('reduce');
	}

</script>
</body>
</html>